<template>
  <div style="width: 100%; height: 100%">
    <Header title="缺陷基本信息" />
    <div class="content">
      <div class="item_list">
        <img src="@/assets/images/model1.png" alt>
        <div>
          <p class="num" @click="module1Click(1)">{{ data.defectSum || 0 }}</p>
          <p class="name">缺陷总数</p>
        </div>
      </div>
      <div class="item_list">
        <img src="@/assets/images/model2.png" alt>
        <div>
          <p class="num" @click="module1Click(2)">{{ data.canceledNumber || 0 }}</p>
          <p class="name">已销号</p>
        </div>
      </div>
      <div class="item_list">
        <img src="@/assets/images/model3.png" alt>
        <div>
          <p class="num" @click="module1Click(3)">{{ data.unCancelledNum || 0 }}</p>
          <p class="name">未销号</p>
        </div>
      </div>
      <div class="item_list">
        <img src="@/assets/images/model4.png" alt>
        <div>
          <p class="num" @click="module1Click(4)">{{ data.oneLevelDefectSum || 0 }}</p>
          <p class="name">一级缺陷总数</p>
        </div>
      </div>
      <div class="item_list">
        <img src="@/assets/images/model5.png" alt>
        <div>
          <p class="num" @click="module1Click(5)">{{ data.twoLevelADefectSum || 0 }}</p>
          <p class="name">二级A类缺陷总数</p>
        </div>
      </div>
      <div class="item_list">
        <img src="@/assets/images/model6.png" alt>
        <div>
          <p class="num" @click="module1Click(6)">{{ data.twoLevelBDefectSum || 0 }}</p>
          <p class="name">二级B类缺陷总数</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from './header.vue'
import { basicDefectInfo } from '@/api/cms/index/index.js'
export default {
  components: {
    Header
  },
  props: {
    deptCode: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: {}
    }
  },
  watch: {
    railTypes(ov) {
      this.module1()
    }
  },
  mounted() {
    this.module1()
  },
  methods: {
    module1() {
      basicDefectInfo({
        deptCode: this.deptCode,
        railTypes: this.railTypes,
        railTypeList: this.railTypes.split(',')
      }).then((res) => {
        this.data = res.data
      })
    },
    module1Click(type) {
      this.$emit('module1Click', { moduleType: 'module1', title: '缺陷基本信息详情', type: type })
    }
  }
}
</script>
<style lang="scss" scoped>
.num {
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  color: #66ffff;
  cursor: pointer;
}
.name {
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 23px;
}
.content {
  width: 100%;
  height: calc(100% - 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 30px;
}
.item_list {
  display: flex;
  align-items: center;
  width: 33%;
}
</style>
